<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 2px dotted #ccc;
            box-sizing: border-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img{
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <span>拖动图片上传</span>
        <img src="">
    </div>
    <button type="submit">上传</button>
</body>
</html>
<script>

    // 在JQ中使用drag drop相关的事件，需要使用ev.originalEvent获取原始事件对象
    // 因为在JQ中，封装的事件中没有dataTransfer属性，也无法获取到files属性

    // 通过on()给DOM元素集合同时添加多个事件
    $('div').on({
        dragover:function(ev){
            // 阻止默认事件
            ev.preventDefault();
        
        },
        drop:function(ev){
            // 阻止默认事件
            ev.preventDefault();
            // 下次拖拽的时候把未上传的图片清空
            $('div').empty();

            console.dir(ev);
            // 获取拖拽的文件
            var file = ev.originalEvent.dataTransfer.files[0];
            console.dir(file);            
            if(file.type.startsWith('image')){
                $('div').append('<img src='+URL.createObjectURL(file)+'>')
            }
        }
    })


    //  $('div').on('dragover',(function(ev){
    //     ev.preventDefault();
    // }))
    // $('div').on('drop',(function(ev){
    //     ev.preventDefault();
    //     // console.dir(ev);
    //     var files = ev.originalEvent.dataTransfer.files;
    //     var file = files[0];
    //     // console.dir(file);
    //     if(file.type.startsWith('image')){
    //         $('div img')[0].src = URL.createObjectURL(file);
    //         // console.dir($('div img')[0])
    //         $('div span').css('display','none');
    //     }else{
    //         console.log('只上传图片');
    //     }
    // }))





</script>